import React, { useState, useMemo } from "react";

function UseMemoTest() {
  const [count, setCount] = useState(1);
  const [val, setValue] = useState("");

  console.log("App 渲染了");

  //   function getNum() {
  //     console.log('getNum调用了！！！');
  //     return count + 100;
  //   }
//   使用了 *useMemo* 来缓存二次计算的值，并设置了依赖项 *count*，只有在 *count* 发生改变时，才会重新执行二次计算。
  const getNum = useMemo(() => {
    console.log("getNum调用了！！！！！");
    return count + 100;
  }, [count]);

  return (
    <div>
      <h1>UseMemo 测试</h1>
      <h4>总和：{getNum}</h4>
      <div>
        <button onClick={() => setCount(count + 1)}>+1</button>
        {/* 文本框的输入会导致整个组件重新渲染 */}
        <input value={val} onChange={(event) => setValue(event.target.value)} />
      </div>
    </div>
  );
}

export default UseMemoTest;
